@charset "UTF-8";

@import "_reset";
@import "_common";

$bg_line_color:#f7f7f7;
$main_color:#08cacc;
$nav_h_fs:20px;
$nav_h_color:black;

$nav_h_sub:17px;
$nav_sub_color:#8d8d8d;

$title_d_size:12px;
$text_size:14px;
$sub_color:#9a9c9d;
$sub_fs:18px;

$game_box_bgc:#eaeaea;


body {
   

    &:before {
        content: "";
        position: absolute;
        display: block;
        width: 100%;
        height: 2900px;
        // padding-bottom: 9999px;
        // margin-bottom: -9999px;
        background:
            url("../img/bg_mushroom.png") no-repeat,
            url("../img/bg_arrow.png") no-repeat,
            url("../img/bg_jelly.png") no-repeat,
            url("../img/bg_controller.png") no-repeat,
            url("../img/bg_doteater.png") no-repeat,
            url("../img/bg_camera.png") no-repeat;
        background-position: 20px 26%, 0 50%, 20px 75%, 94% 32%, 100% 62%, 94% 85%;
        background-size: 10% auto, 15% auto, 12% auto, 6% auto, 10% auto, 6% auto;
        z-index: -1;
    }
}


/******* start of kv *******/
.kv {
    // position: relative;
    // top: 120px;
    height: 45vw;
    // height:750px;
    // background-color: #222222;
    background-image: url("../img/hand_bg.jpeg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
   
   
    .frame {
        position: absolute;
        width: 89.5%;
        left: 50%;
        transform: translateX(-50%);
        // background-color:red;
        height: inherit;
        
        
        
    

        .try_section {
            position: absolute;
            left: 20.5%;
            top: 30%;
            width: 16%;
            font-size: 14px;

            .try {
                position: relative;
                display: block;
                background-image: linear-gradient(to top, #ff4c3f, #ff6c57);
                height: auto;
                width: 90%;
                min-width: 130px;
                color: white;
                text-align: left;
                line-height: 50px;
                border-radius: 25px;
                padding-left: 20px;
                box-sizing: border-box;
                margin-bottom: 14px;
                transition: .3s cubic-bezier(.36, .67, .36, 1.86);

                &:hover {
                    transform: scale(1.2);
                }

                .icon-sanjiao-you-f {
                    position: absolute;
                    top: 50%;
                    right: 10px;
                    transform: translateY(-50%);
                    display: inline-block;
                    height: 33px;
                    width: 33px;
                    border-radius: 50%;
                    background-color: #b31702;
                    box-shadow: 1px 1px 2px rgb(43, 43, 43) inset;
                    margin-left: 15px;

                    &::before {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        transform: translate(-43%, -50%);
                    }

                }

            }

            p {
                color: #949494;
                line-height: 20px;
            }

        }

        .phone {
           
            width: 17.6%;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            // background-color:white;
            height: inherit;
            z-index: 1;

            .phone_img {
                width: 100%;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%, -50%);
            }

            .carousel {
                position: absolute;
                left: 6.4%;
                top: 21.1%;
                height: 55%;
                width: 87.5%;
                font-size: 0;
                // background-color: red;

                .carousel_frame {
                    position: relative;
                    height: 100%;
                    width: 100%;
                    overflow: hidden;

                    .carousel_bar {
                        width: 400%;
                        height: 100%;
                        position: absolute;
                        // transition: .3s cubic-bezier(0.075, 0.82, 0.165, 1);

                        li {
                            display: inline-block;
                            width: 25%;
                            height: 100%;
                            overflow: hidden;
                            position: relative;

                            // object-fit: contain;
                            // text-align: center;
                            // background-color:red;
                            img {
                                height: 100%;
                                width: 100%;
                                object-fit: cover;
                                // position: absolute;
                                // left:50%;
                                // transform:translateX(-50%);
                            }
                        }

                    }
                }


                .dot {
                    position: absolute;
                    top: 130%;
                    left: 50%;
                    width: 100px;
                    transform: translateX(-50%);
                    text-align: center;

                    li {
                        display: inline-block;
                        margin: 0 4px;
                        cursor: pointer;

                        .icon-dot::before {
                            font-size: 13px;
                            color: #393939;
                        }

                        &.active>.icon-dot::before {
                            color: #bdbdbd;
                        }

                    }
                }

            }
        }

        .know_more_section {
            position: absolute;
            // height: inherit;
            left: 62%;
            top: 24%;
            width: 23%;

            // background-color:red;
            h3 {
                color: $main_color;
                font-size: 42px;
                line-height: 28px;
                margin-bottom: 20px;

                .jump {
                    display: inline-block;
                    animation: jump 0.4s cubic-bezier(1, .01, .87, .29) alternate infinite;
                    // cubic-bezier(1,.01,.87,.29)
                }

                .sub {
                    // display: inline;
                    font-size: 24px;
                    line-height: 10px;
                }
            }

            p {
                color: #949494;
                margin-bottom: 20px;
                font-size: 14px;
            }

            .know_more {
                position: relative;
                display: block;
                background-image: linear-gradient(to top, #0e9f91, $main_color);
                height: auto;
                width: 50%;
                min-width: 100px;
                color: white;
                text-align: center;
                line-height: 50px;
                border-radius: 25px;
                margin-bottom: 14px;
                text-shadow: -1px 1px 1px #007d6f;
                transition: .3s cubic-bezier(.36, .67, .36, 1.86);

                &:hover {
                    transform: scale(1.2);
                }
            }
        }


        .icon_section {
            // position: absolute;
            // bottom:0;
            margin: 33% auto;
            // background-color: red;
            width: 100%;
            height: 18%;

            .left {
                width: 50%;
            }

            .right {
                width: 50%;
                text-align: right;
            }

            .left,
            .right {
                .icon {
                    display: inline-block;
                    margin: 0.7%;
                    width: 7vw;
                    height: 7vw;
                    border-radius: 50%;
                    overflow: hidden;
                    border: 4px solid #4d4d4d;

                    a {
                        display: inline-block;

                        img {
                            width: 100%;
                            height: 100%;
                            object-fit: cover;
                        }
                    }

                }
            }
        }
    }
}

/******* End of kv *******/







@keyframes jump {
    from {
        transform: translateY(-15px);
    }

    to {
        transform: translateY(5px);

    }
}


@keyframes rotate-fade{
    0%{
        transform: rotateY(30deg);
        opacity: 0;
        
    }
    100%{
        transform: rotateY(0deg) ;
        opacity: 1;
        // transform-style: preserve-3d;
    }

}

@media screen and (max-width: 1200px) {
    .kv {
        .frame {
            .icon_section {
                margin: 37% auto;
            }
        }
    }
}


@media screen and (max-width: 1000px) {
    .kv {

        .frame {
            background-color: #222222;

            // background-image:  #222222;
            .try_section {
                border: 2px dashed white;
                text-align: center;
                position: absolute;
                left: 2%;
                top: 19%;
                width: 35%;
                padding: 15px;
                box-sizing: border-box;

                .try {
                    width: 50%;
                    display: inline-block;
                }


            }

            .know_more_section {
                position: absolute;
                // height: inherit;
                left: 62%;
                top: 24%;
                width: 40%;
            }

            .icon_section {
                margin: 43% auto;
                height: 15%;
                // display: none;

                .left,
                .right {
                    .icon {

                        width: 5vw;
                        height: 5vw;

                        border: 2px solid #4d4d4d;

                    }
                }
            }
        }
    }


    
}

@media screen and (max-width: 820px) {
    .kv {
        .icon_section {
            // margin: 43% auto;
            // height:15%;
            display: none;
        }
    }
}

@media screen and (max-width: 700px) {
   

    .kv {

        height: auto;

        background-color: #222222;
        padding-top: 10px;
        background-color: #222222;
        background-image: none;

        .frame {
            position: static;
            left: 0;
            right: 0;
            transform: translate(0, 0);
            width: 90%;
            margin: 0 auto;

            // background-image:  #222222;
            // height: auto;
            .try_section {
                position: static;
                ;

                text-align: center;
                width: 80%;
                min-width: 220px;
                margin: 0 auto 10px;
                height: auto;

                // font-size: 14px;
                // margin-top: 10px;
                .try {
                    position: relative;

                    width: 30%;
                    min-width: 130px;
                    margin: 0 auto 10px;

                }

                p {
                    color: #949494;
                    line-height: 20px;
                }

            }



            .phone {
                // display: none;
                &::before{
                    content:"";
                    display: block;
                    padding-top: 195.5%;
                    background-color: transparent;
                }
                width: 80%;
                min-width: 220px;
                margin: 0 auto 100px;
                // position: absolute;
                position: relative;

                left: 0;
                top: 0;
                transform: translate(0%, 0%);
                // padding-bottom: 40px;
                // background-color:white;
                // height: inherit;

                .phone_img {
                    width: 100%;
                    position: absolute;
                    left: 0;
                    top: 0;
                    transform: translate(0, 0);
                }

                .carousel {
                    top:11.1%;
                    height: 77%;

                    .dot {

                        top: 120%;

                    }

                }
            }


            .know_more_section {

                position: static;
                // display: none;
                // height: inherit;
                left: 0%;
                top: 0%;
                width: 100%;
                padding: 20px 0;
                text-align: center;
                // background-color:red;

                .know_more {
                    position: relative;

                    margin: 0 auto;
                    width: 50%;
                    min-width: 100px;

                }
            }

            .icon_section {
                margin: 39% auto;

            }
        }
    }



    
}